<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>学生管理系统</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/comon0.css">
    <style>
        .custom-table {
            border-collapse: collapse;
            width: 100%;
        }

        .custom-table th,
        .custom-table td {
            border: 1px solid #ddd;
            padding: 8px;
        }

        .custom-table tr:nth-child(even) {
            background-color: #f2f2f2;
        }

        .custom-button {
            background-color: #4CAF50;
            color: white;
            padding: 8px 16px;
            border: none;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 14px;
            margin: 4px 2px;
            cursor: pointer;
            border-radius: 4px;
        }

        .custom-button:hover {
            background-color: #45a049;
        }
    </style>

</head >

<body style="background: #fffef9">

    <div class="container my-2">
        <h1 style="text-align: center; color: blue; font-family: Arial, sans-serif;">学生管理系统</h1>

        <div style="display: flex; justify-content: space-between;">
            <div>
                <a th:href="@{/showNewStudentForm}" style="color: #deab8a; margin-bottom: 10px;" class="btn btn-primary btn-sm">添加学生信息</a>
            </div>

            <div>
                <a th:href="@{/classInfo}" style="color: #222222; float: none ;background: #deab8a" class="btn btn-primary btn-sm">班级操作</a>
            </div>

            <div style="display: flex; align-items: center;">
                <form id="query-form" action="/query" method="get" style="display: flex; flex-direction: row-reverse; background-color: #94d6da; border-radius: 10px;">
                    <input type="text" id="name-input" name="inpname" placeholder="student name" style="border: none;background-color: #afb4db;">
                    <button type="button" onclick="queryStudent()" style="border: none; background: transparent;">查找学生</button>
                </form>
            </div>
        </div>

        <script>
            function queryStudent() {
                var name = document.getElementById("name-input").value;
                var url = "/query" + encodeURIComponent(name);
                window.location.href = url;
            }
        </script>



        <table border="1" class="table table-striped table-responsive-md">
            <thead style="border: #222222 1px ridge">
            <tr>
                <th>
                    <a th:href="@{'/page/' + ${currentPage} + '?sortField=name&sortDir=' + ${reverseSortDir}}">
                        学生姓名</a>
                </th>
                <th>
                    <a th:href="@{'/page/' + ${currentPage} + '?sortField=sex&sortDir=' + ${reverseSortDir}}">
                        性别</a>
                </th>
                <th>
                    <a th:href="@{'/page/' + ${currentPage} + '?sortField=age&sortDir=' + ${reverseSortDir}}">
                        年龄</a>
                </th>

                <th>
                    <a th:href="@{'/page/' + ${currentPage} + '?sortField=status&sortDir=' + ${reverseSortDir}}">
                        学籍状态</a>
                </th>

                <th>
                    <a th:href="@{'/page/' + ${currentPage} + '?sortField=ticy&sortDir=' + ${reverseSortDir}}">
                        籍贯</a>
                </th>

                <th>
                    <select class="form-select" id="floatingSelectGrid" onchange="onSelectChange(this)">
                        <option value="">班级</option>
                        <option th:each="classroom : ${listclass}" th:text="${classroom.name}"></option>
                    </select>

                    <script type="text/javascript">
                        function onSelectChange(selectElement){
                            var selectedValue = selectElement.value;
                            if(selectedValue !== ''){
                                var url = "/classname"+selectedValue;
                                window.location.href = url;
                            }
                        }
                    </script>

                </th>

                <th> 操作 </th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="student : ${listStudent}">
                <td th:text="${student.name}"></td>
                <td th:text="${ student.sex }"></td>
                <td th:text="${student.age}"></td>
                <td th:text="${ student.status }"></td>
                <td th:text="${student.ticy}"></td>
                <td th:text="${student.className}"></td>
                <td> <a th:href="@{/showNewStudentUpdate{id}(id=${student.id})}" class="btn btn-primary">修改</a>
                    <a th:href="@{/deleteStudent{id}(id=${student.id})}" class="btn btn-danger">删除</a>
                </td>
            </tr>
            </tbody>
        </table>

        <div th:if = "${totalPages > 1}">
            <div class = "row col-sm-10">
                <div class = "col-sm-3">
                    数据条目 : [[${totalItems}]]
                </div>
                <div class = "col-sm-5">
					<span th:each="i: ${#numbers.sequence(1, totalPages)}">
						<a th:if="${currentPage != i}" th:href="@{'/page/' + ${i}+ '?sortField=' + ${sortField} + '&sortDir=' + ${sortDir}}">[[${i}]]</a>
						<span th:unless="${currentPage != i}">[[${i}]]</span>  &nbsp; &nbsp;
					</span>
                </div>
                <div class = "col-sm-1">
                    <a th:if="${currentPage < totalPages}" th:href="@{'/page/' + ${currentPage + 1}+ '?sortField=' + ${sortField} + '&sortDir=' + ${sortDir}}">Next</a>
                    <span th:unless="${currentPage < totalPages}">下一页</span>
                </div>

                <div class="col-sm-1">
                    <a th:if="${currentPage < totalPages}" th:href="@{'/page/' + ${totalPages}+ '?sortField=' + ${sortField} + '&sortDir=' + ${sortDir}}">Last</a>
                    <span th:unless="${currentPage < totalPages}">最后一页</span>
                </div>
            </div>
        </div>

    </div>

    <a th:href="@{/}" th:color="red" class="btn btn-primary btn-sm mb-3"> 返回首页 </a>



</body>

</html>